<template>
    <h3>显示投资表</h3>
    姓名名称：<input type="text" v-model="Searinfo.FName" />
    投资总金额：<input type="text" v-model="Searinfo.MinPrice" />
    投资总人数：<input type="text" v-model="Searinfo.MaxPrice" />
    <input type="button" value="查询" @click="Show">
    <table border="1">
        <thead>
            <tr>
                <th>投资名称</th>
                <th>投资总额度</th>
                <th>已投资额度</th>
                <th>剩余额度</th>
                <th>投资人数</th>
                <th>操作</th>
            </tr>
        </thead>


        <tbody>
            <tr v-for="item in info">
                <td>{{item.FName}}</td>
                <td>{{item.FSumPrice}}</td>
                <td>{{item.FPriced}}</td>
                <td>{{item.FPricest}}</td>
                <td>{{item.FNumber}}</td>
                <td>
                    <a href="#" @click="UpFinan(item.Fid)">修改</a>&nbsp;
                    <a href="#" @click="DelFinan(item.Fid)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">
import{ref,onMounted} from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router';
import router from '../router';

//实例化配置路由
const route=useRoute();


const info=ref([{
    Fid:0,
    FName:'',
    FSumPrice:'',
    FPriced:0,
    FPricest:0,
    FNumber:'',
}])

const Searinfo=ref({
    FName:'',
    MinPrice:'',
    MaxPrice:'',
})

onMounted(()=>{
    Show();
})

function Show(){
   axios.get("http://localhost:3947/api/API/Show",{
        params:{
            FName:Searinfo.value.FName,
            MinPrice:Searinfo.value.MinPrice,
            MaxPrice:Searinfo.value.MaxPrice,
        }
   })
   .then(res=>{
    info.value=res.data;
   })
   .catch(err=>{
       console.log(err);
   })
}

//删除
const DelFinan=(()=>{
    if(confirm("确定要删除吗？")){
        alert("删除成功");
    }
})

//修改
const UpFinan=(Fid:number)=>{
    router.push({
        name:"UpdateFinan",
        params:{
            Fid:Fid,
        }
    })
}

</script>